<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级学生作品展示</title>
    <script src="./tailwind.js"></script>
    <link href="./font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#7B61FF',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(22, 93, 255, 0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
            }
            .bg-gradient {
                background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-dark">学生作品展示平台</h1>
            </div>
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">联系我们</a>
            </div>
            <button class="md:hidden text-gray-600">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主横幅 -->
    <section class="bg-gradient text-white py-16 md:py-24">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-[clamp(1.75rem,5vw,2.75rem)] font-bold mb-4">人工智能学院学生作品展示</h2>
            <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-2xl mx-auto opacity-90">
                探索学生的创新项目和优秀作品，见证他们的成长与进步
            </p>
        </div>
    </section>

    <!-- 班级卡片区域 -->
    <section class="py-16 container mx-auto px-4">
        <div class="text-center mb-12">
            <h3 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold text-dark mb-3">班级列表</h3>
            <p class="text-gray-600 max-w-2xl mx-auto">点击下方班级卡片，查看对应班级学生的精彩作品</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
            <!-- 班级1 -->
            <a href="./jy202501.html" class="block">
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover h-full">
                    <div class="h-48 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-laptop text-primary text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="text-xl font-bold text-dark">计算机应用技术202501班</h4>
                            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">32人</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">专注于Web开发与设计，作品涵盖前端与后端技术</p>
                        <div class="flex items-center text-primary text-sm">
                            <span>查看作品</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>

            <!-- 班级2 -->
            <a href="./jy202502.html" class="block">
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover h-full">
                    <div class="h-48 bg-secondary/10 flex items-center justify-center">
                        <i class="fa fa-mobile text-secondary text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="text-xl font-bold text-dark">计算机应用技术202502班</h4>
                            <span class="bg-secondary/10 text-secondary text-sm px-3 py-1 rounded-full">29人</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">专注于Web开发与设计，作品涵盖前端与后端技术</p>
                        <div class="flex items-center text-secondary text-sm">
                            <span>查看作品</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>

            <!-- 班级3 -->
            <a href="./jy202503.html" class="block">
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover h-full">
                    <div class="h-48 bg-accent/10 flex items-center justify-center">
                        <i class="fa fa-database text-accent text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="text-xl font-bold text-dark">计算机应用技术202503班</h4>
                            <span class="bg-accent/10 text-accent text-sm px-3 py-1 rounded-full">31人</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">专注于Web开发与设计，作品涵盖前端与后端技术</p>
                        <div class="flex items-center text-accent text-sm">
                            <span>查看作品</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>

            <!-- 班级4 -->
            <a href="./jy202504.html" class="block">
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover h-full">
                    <div class="h-48 bg-green-500/10 flex items-center justify-center">
                        <i class="fa fa-cogs text-green-500 text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="text-xl font-bold text-dark">计算机应用技术202504班</h4>
                            <span class="bg-green-500/10 text-green-500 text-sm px-3 py-1 rounded-full">30人</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">专注于Web开发与设计，作品涵盖前端与后端技术</p>
                        <div class="flex items-center text-green-500 text-sm">
                            <span>查看作品</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>

            <!-- 班级5 -->
            <a href="./jy202505.html" class="block">
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover h-full">
                    <div class="h-48 bg-purple-500/10 flex items-center justify-center">
                        <i class="fa fa-shield text-purple-500 text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="text-xl font-bold text-dark">计算机应用技术202505班</h4>
                            <span class="bg-purple-500/10 text-purple-500 text-sm px-3 py-1 rounded-full">28人</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">专注于Web开发与设计，作品涵盖前端与后端技术</p>
                        <div class="flex items-center text-purple-500 text-sm">
                            <span>查看作品</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>

    <!-- 统计数据区域 -->
    <section class="bg-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2">5</div>
                    <div class="text-gray-600">班级数量</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2">150</div>
                    <div class="text-gray-600">学生总数</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2">200+</div>
                    <div class="text-gray-600">作品数量</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2">8</div>
                    <div class="text-gray-600">技术方向</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-3">
                        <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        <h3 class="text-xl font-bold">学生作品展示平台</h3>
                    </div>
                    <p class="text-gray-400 text-sm max-w-md">
                        展示计算机专业学生的创新成果，促进学术交流与技术进步
                    </p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-envelope text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-globe text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                © 2023 计算机专业学生作品展示平台 | 设计与开发：计算机系
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
            }
        });
    </script>
</body>
</html>
